XAML এ Grid Layout হল একটি শক্তিশালী কন্ট্রোল যা বিভিন্ন UI উপাদানকে সেল হিসেবে সাজাতে ব্যবহৃত হয়। এটি লেআউট কন্ট্রোলের মধ্যে অন্যতম, যেখানে আপনি রো (Row) এবং কলাম (Column) ডিফাইন করে উপাদানগুলোকে সুনির্দিষ্টভাবে সাজাতে পারেন। XAML এ Grid ব্যবহার করে বিভিন্ন UI উপাদানকে একে অপরের সাথে সমন্বয় করে উপস্থাপন করা হয়।
Grid Layout এর মৌলিক ধারণা
Grid Layout একটি টেবিলের মতো কাজ করে যেখানে সারি (Row) এবং কলাম (Column) থাকে, এবং এই সারি এবং কলামের মধ্যে উপাদানগুলোকে সেল হিসেবে সাজানো হয়। Grid কন্ট্রোলের মধ্যে আপনি কলাম এবং সারির সংখ্যা ডিফাইন করতে পারেন এবং উপাদানগুলোকে নির্দিষ্ট সারি এবং কলামে রাখার জন্য তাদের অবস্থান নির্ধারণ করতে পারেন।
Grid কন্ট্রোলের মৌলিক স্ট্রাকচার
Grid এর মৌলিক ট্যাগ স্ট্রাকচার:
<Grid>
<!-- Row Definitions -->
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Column Definitions -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- UI Elements -->
<Button Content="Button 1" Grid.Row="0" Grid.Column="0"/>
<Button Content="Button 2" Grid.Row="0" Grid.Column="1"/>
<Button Content="Button 3" Grid.Row="1" Grid.Column="0"/>
<Button Content="Button 4" Grid.Row="1" Grid.Column="1"/>
</Grid>
এখানে:
- Grid: গ্রিড কন্ট্রোলের জন্য রুট ট্যাগ।
- RowDefinitions: গ্রিডে সারির সংখ্যা এবং তাদের উচ্চতা ডিফাইন করে।
- ColumnDefinitions: গ্রিডে কলামের সংখ্যা এবং তাদের প্রস্থ ডিফাইন করে।
- Grid.Row এবং Grid.Column: নির্দিষ্ট উপাদানকে কোন সারি এবং কলামে রাখতে হবে তা নির্ধারণ করে।
Row/Column Definition
Grid কন্ট্রোলের মধ্যে RowDefinition এবং ColumnDefinition ব্যবহার করা হয়, যা সারি এবং কলামের বৈশিষ্ট্য নির্ধারণ করে।
RowDefinition:
- RowDefinition ট্যাগের মাধ্যমে গ্রিডের সারি নির্ধারণ করা হয়।
- Height অ্যাট্রিবিউটের মাধ্যমে সারির উচ্চতা নির্ধারণ করা হয়। এটি তিনটি প্রধান মান গ্রহণ করতে পারে:
- Auto: সারির উচ্চতা হবে তার কন্টেন্টের প্রয়োজন অনুযায়ী।
- *: সারিটি প্রাপ্য স্পেসের একটি অনুপাতিক অংশ নেবে (Flex).
- PX (যেমন: 100): সারির উচ্চতা নির্দিষ্ট পিক্সেলে নির্ধারণ করা যাবে।
ColumnDefinition:
- ColumnDefinition ট্যাগের মাধ্যমে গ্রিডের কলাম নির্ধারণ করা হয়।
- Width অ্যাট্রিবিউটের মাধ্যমে কলামের প্রস্থ নির্ধারণ করা হয়। এটি Auto, *, অথবা PX হতে পারে।
Row/Column Definition উদাহরণ
সারি এবং কলাম ডিফাইন করা
<Grid>
<!-- Row Definitions -->
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<!-- Column Definitions -->
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="*"/>
</Grid.ColumnDefinitions>
<!-- UI Elements -->
<Button Content="Button 1" Grid.Row="0" Grid.Column="0"/>
<Button Content="Button 2" Grid.Row="0" Grid.Column="1"/>
<Button Content="Button 3" Grid.Row="1" Grid.Column="0"/>
<Button Content="Button 4" Grid.Row="1" Grid.Column="1"/>
</Grid>
এখানে:
- প্রথম Row (
RowDefinition Height="Auto") সারিটি তার কন্টেন্ট অনুযায়ী উচ্চতা নিবে। - দ্বিতীয় Row (
RowDefinition Height="*") সারিটি বাকি স্পেসটি দখল করবে। - প্রথম Column (
ColumnDefinition Width="Auto") কলামটি তার কন্টেন্ট অনুযায়ী প্রস্থ নিবে। - দ্বিতীয় Column (
ColumnDefinition Width="*") কলামটি বাকি স্পেসটি দখল করবে।
কাস্টম সাইজিং ব্যবহার করে সারি এবং কলাম ডিফাইন করা
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="100"/>
<RowDefinition Height="2*"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="1*"/>
<ColumnDefinition Width="3*"/>
</Grid.ColumnDefinitions>
<Button Content="Button 1" Grid.Row="0" Grid.Column="0"/>
<Button Content="Button 2" Grid.Row="0" Grid.Column="1"/>
<Button Content="Button 3" Grid.Row="1" Grid.Column="0"/>
<Button Content="Button 4" Grid.Row="1" Grid.Column="1"/>
</Grid>
এখানে:
- প্রথম সারিটি 100 পিক্সেল উচ্চতা নেবে।
- দ্বিতীয় সারিটি প্রাপ্য স্পেসের 2 গুণ অংশ নেবে।
- প্রথম কলামটি প্রাপ্য স্পেসের 1 গুণ অংশ নেবে এবং দ্বিতীয় কলামটি প্রাপ্য স্পেসের 3 গুণ অংশ নেবে।
Grid কন্ট্রোলের বৈশিষ্ট্যসমূহ
- RowSpan এবং ColumnSpan:
- RowSpan এবং ColumnSpan ব্যবহার করে একটি উপাদান একাধিক সারি বা কলাম দখল করতে পারে।
উদাহরণ:
<Button Content="Span Button" Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" Grid.ColumnSpan="2"/>
- HorizontalAlignment এবং VerticalAlignment:
- এই অ্যাট্রিবিউটগুলি ব্যবহার করে আপনি উপাদানগুলোর সঠিক অবস্থান নির্ধারণ করতে পারেন, যেমন
Left,Center,Right,Top,Bottomইত্যাদি।
- এই অ্যাট্রিবিউটগুলি ব্যবহার করে আপনি উপাদানগুলোর সঠিক অবস্থান নির্ধারণ করতে পারেন, যেমন
সারাংশ
- Grid Layout হল XAML এর একটি শক্তিশালী কন্ট্রোল যা সারি এবং কলাম দিয়ে UI উপাদানগুলোর লেআউট নির্ধারণ করতে ব্যবহৃত হয়।
- RowDefinition এবং ColumnDefinition এর মাধ্যমে গ্রিডের সারি এবং কলামের বৈশিষ্ট্য (উচ্চতা এবং প্রস্থ) নির্ধারণ করা হয়।
- RowSpan এবং ColumnSpan দিয়ে একাধিক সারি বা কলাম দখল করা যায়, যা গ্রিডের আরও উন্নত কাস্টমাইজেশন করতে সহায়ক।
Content added By
Read more
